<!--库存查询-->
<template>
  <el-container>
    <el-header>
      <el-button class="btn  float-left" type="primary" round>{{lang._011}}</el-button>
      <!-- 导出按钮 -->
      <el-button class="float-right search-btn" type="primary" round>{{lang._012}}</el-button>
      <el-select class="select-input float-right" width="166" v-model="value" :placeholder="lang._264" style="width:114px;border-radius:14px 0 0 14px">
      </el-select>
      <!-- 时间选择 -->
    </el-header>
    <!-- 顶部栏 -->
    <el-main>
<div style="width:1500px;margin:0 auto">
        <canvas id="myChart"></canvas>
      </div>
    </el-main>
  </el-container>


</template>
<style lang="less" scoped>
  .el-header {
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
    //   margin-left: 20px;
    //   margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .select-input {
      width: 149px;
      height: 28px;
      line-height: 28px;
      margin-top: 15px;
      border: 1px solid #409EFF;
      border-right: none;
      overflow: hidden;
    }
  }

</style>
<style scoped>
  .el-header,
  .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
<style>
  .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none;
    margin: 0;
  }

  
</style>


<script>
import Chart from 'chart.js';
  export default {
    props: ['lang'],
    data() {
      return {
        tableData: [{
            uid: '1',
            goodsName: '好吃的东西',
            barCode: '1024204830724096',
            pinYinCode: 'HaoChiDeDongXi',
            goodsCategroy: '假想类',
            stock: '90',
            unit: 'kg',
            supplier: '供货商A'
        },{
            uid: '1',
            goodsName: '好吃的东西',
            barCode: '1024204830724096',
            pinYinCode: 'HaoChiDeDongXi',
            goodsCategroy: '假想类',
            stock: '90',
            unit: 'kg',
            supplier: '供货商A'
        },{
            uid: '1',
            goodsName: '好吃的东西',
            barCode: '1024204830724096',
            pinYinCode: 'HaoChiDeDongXi',
            goodsCategroy: '假想类',
            stock: '90',
            unit: 'kg',
            supplier: '供货商A'
        },{
            uid: '1',
            goodsName: '好吃的东西',
            barCode: '1024204830724096',
            pinYinCode: 'HaoChiDeDongXi',
            goodsCategroy: '假想类',
            stock: '90',
            unit: 'kg',
            supplier: '供货商A'
        },]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    mounted: function(){
        var ctx = document.getElementById("myChart");
        var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [10, 20, 30,40,50,60,70,80],
            backgroundColor: ['#409eff', '#f56c6c', '#67c23a', '#e6a23c', '#70b6ff', '#fa9191', '#91e16a',
              '#f3bd6c', '#96c9ff', '#faadad', '#a6e18a', '#f3cb90', '#155ca6', '#ff8a8a','#f3cb90','#ffbe5c','#5489bf',
              '#de579a', '#a5d936', '#fd9135'
            ],
          }],

          // These labels appear in the legend and in the tooltips when hovering different arcs
          labels: ['无', '钻石会员', '普通会员', '内部员工', '金卡会员', 'VIP会员', '贵宾卡', '股东卡'
          ]
        },
        options: {
          cutoutPercentage: 0,
          legend: {
            display: true,
            position:'left'
          },
          title: {
            display: true,
            text: '会员分析（会员数）-等级',
            fontSize: '20'
          }
        }
      });
    }
  }

</script>
